Working With Media in Windows Phone 7

Introduction

In this article we are going to see how to use media framework which helps the application developers to stream video and audio files and to use the integrated Music and video Hubs to select the media files. Media in windows phone 7 uses the MediaElemt API to incorporate the audio and video files using the inbuilt device media player in Silverlight for Windows Phone 7 Application. In this article we will see how to play a video file using the MediaElementAPI with windows phone 7 application development. Let us see the step by step process on how to use the Media development in Windows phone 7 application using the MediaElement API.

Steps

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 application project by providing a valid project name as shown in the screen below.

Now let us customize the Mainpage.XAML by adding a button control and a MediaElement to play the video file as shown in the screen below. Also we have customized the header grid to have a unique design for this series of articles.

XAML Code

 ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Button Content="Play Video" Height="72" HorizontalAlignment="Left" Margin="12,30,0,0"
 Name="button1" VerticalAlignment="Top"
 Width="427" /><MediaElement Height="356" HorizontalAlignment="Left" Margin="34,144,0,0" 

Name="mediaElement1" VerticalAlignment="Top" Width="386" /> </Grid>

 

Now let us add a sample video file to the project which we will load on click of the button. We have added a sample .WMV file to the root folder of the project once we added the file now go to the button click event (Play Video button) and write the below code to stream the video file on button click as shown in the below screen.

XAML Code

 PhoneApplicationPage

x:Class="F5debugWp7Media.MainPage"

xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation%22">

http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>

xmlns:x="

<a href="http://schemas.microsoft.com/winfx/2006/xaml%22">

http://schemas.microsoft.com/winfx/2006/xaml"</a>

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="

<a href="http://schemas.microsoft.com/expression/blend/2008%22">

http://schemas.microsoft.com/expression/blend/2008"</a>

xmlns:mc="

<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">

http://schemas.openxmlformats.org/markup-compatibility/2006"</a>

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<!--<span class="hiddenSpellError" pre="">LayoutRoot</span> is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <!--<span class="hiddenSpellError" pre="">TitlePanel</span> contains the name of the application and page title-->

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

        <TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="video player" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

 

<!--ContentPanel - place additional content here-->

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Button Content="Play Video" Height="72" HorizontalAlignment="Left" Margin="12,30,0,0" Name="button1"

VerticalAlignment="Top" Width="427" Click="button1_Click" />

<MediaElement Height="356" HorizontalAlignment="Left" Margin="34,144,0,0" Name="mediaElement1"

 VerticalAlignment="Top" Width="386" />

</Grid>

</Grid>

PhoneApplicationPage>

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace F5debugWp7Media

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Source = new Uri("Bear.wmv", UriKind.Relative);

            mediaElement1.Play();

        }

    }

}

 

Now we are done with our code, let us build and execute the application by directly pressing the F5 button from the keyboard or by selecting the Build and Execute option from the tool bar. We can see the output of the application as shown in the screen below.

Now we can see the video streaming as shown in the above screen, with the option to restart and reset the video at any point of time. We can also customize to select the file randomly and play as we normally do using the play lists which we can see in depth in our upcoming articles.

Conclusion

So in this article we have seen how to use the Media Element to stream video files and use it effectively. We will see in depth on the property available to make a customized video player in our upcoming articles.